<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
</style>
<script type="text/html" id="photos-item-tpl">
    <li id="saved-image{id}">
        <input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
        <input class="form-control" id="photo-{id}-name" type="text" name="photo_names[]" value="{name}"
               style="width: 200px;" title="图片名称">
        <img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
             onclick="imagePreviewDialog(this.src);">
        <a href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a>
        <a href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
    </li>
</script>
<script type="text/html" id="files-item-tpl">
    <li id="saved-file{id}">
        <input id="file-{id}" type="hidden" name="file_urls[]" value="{filepath}">
        <input class="form-control" id="file-{id}-name" type="text" name="file_names[]" value="{name}"
               style="width: 200px;" title="文件名称">
        <a id="file-{id}-preview" href="{preview_url}" target="_blank">下载</a>
        <a href="javascript:uploadOne('文件上传','#file-{id}','file');">替换</a>
        <a href="javascript:(function(){$('#saved-file{id}').remove();})();">移除</a>
    </li>
</script>
<!--select多选开始-->
<link rel="stylesheet" href="__STATIC__/js/selectpicker/css/bootstrap-select.min.css">
<script src="__STATIC__/js/selectpicker/js/bootstrap-select.min.js"></script>
<script src="__STATIC__/js/selectpicker/js/defaults-zh_CN.min.js"></script>
<!--select多选结束-->
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('Home/index')}">推荐列表</a></li>
        <li class="active"><a href="#">推荐编辑</a></li>
    </ul>
    <form action="{:url('Home/editPost')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <div class="row">
            <div class="col-md-9">
                <table class="table table-bordered">
                    <tr>
                        <th width="150">标题<span class="form-required">*</span></th>
                        <td>
                            <input class="form-control" type="text" name="title" required  placeholder="请输入标题" value="{$post.title}"/>
                        </td>
                    </tr>
                    <tr>
                        <th>类型<span class="form-required">*</span></th>
                        <td>
                            <input type="hidden" name="id" required value="{$post.id}"/>
                            <select class="form-control" name="type" id="type_id" style="width:200px;">
                                <option value="">请选择类型</option>
                                <foreach name="type" item="vo" key="key">
                                    <option value="{$key}" <eq name="$key" value="$post.type">selected</eq>>{$vo}</option>
                                </foreach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>球队对战<span class="form-required">*</span></th>
                        <td>
                            <input type="hidden" id="bat_match_id" value="{$post.bat_id}"/>
                            <select class="form-control" name="bat_id" id="bat_id" style="width:500px;">
                                <option value="">请选择球队对战</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>预测比分<span class="form-required">*</span></th>
                        <td>
                            <span>主场分数：</span>
                            <input class="form-control" type="number" min="0" max="999" name="main_score"  style="width:100px;display:inline;" required value="{$post.main_score}">&nbsp;&nbsp;&nbsp;&nbsp;
                            <span>客场分数：</span>
                            <input class="form-control" type="number" min="0" max="999" name="pass_score"  style="width:100px;display:inline;" required value="{$post.pass_score}">
                        </td>
                    </tr>
                    <tr>
                        <th>视频<span class="form-required">*</span></th>
                        <td class="form-inline">
                            <input id="file-video" class="form-control" type="text" name="video" placeholder="请上传视频文件" style="width: 400px;" value="{$post.video}">
                            <a href="javascript:uploadOne('文件上传','#file-video','video');">上传</a>
                        </td>
                    </tr>
                    <tr>
                        <th>内容<span class="form-required">*</span></th>
                        <td>
                            <script type="text/plain" id="content" name="content">{$post.content}</script>
                        </td>
                    </tr>
                    <tr>
                        <th>战绩<span class="form-required">*</span></th>
                        <td>
                            <select class="form-control" name="gains" style="width:200px;">
                                <foreach name="gains" item="vo" key="key">
                                    <option value="{$key}" <eq name="$key" value="$post.gains">selected</eq>>{$vo}</option>
                                </foreach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>阅读数量<span class="form-required">*</span></th>
                        <td>
                            <input type="number" class="form-control" name="read_num" min="0" value="{$post.read_num}">
                        </td>
                    </tr>

                    <!--推荐聊吧-->
                    <tr>
                        <th>推荐聊吧</th>
                        <td>
                            <input type="hidden" name="talk_ids_guess" value="{$post.talk_ids_guess}" id="talk_ids">
                            <select class="selectpicker" id="talk_id" data-live-search="true" multiple >
                                <option value="">请选择推荐聊吧</option>
                            </select>
                        </td>
                    </tr>
                    <!--对战推荐-->
                    <tr>
                        <th>推荐互动竞猜</th>
                        <td>
                            <input type="hidden" id="bat_match_id_guess"  value="{$post.bat_id_guess}"/>
                            <select class="form-control" name="bat_id_guess" id="bat_id_guess" style="width:500px;">
                                <option value="">请选择球队对战</option>
                            </select>
                        </td>
                    </tr>

                </table>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('SAVE')}</button>
                        <a class="btn btn-default" href="{:url('Home/index')}">{:lang('BACK')}</a>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <table class="table table-bordered">
                    <tr>
                        <th><b>封面图</b><span class="form-required">*</span></th>
                    </tr>
                    <tr>
                        <td>
                            <div style="text-align: center;">
                                <input type="hidden" name="thumbnail" id="thumbnail" value="{$post.thumbnail}">
                                <a href="javascript:uploadOneImage('图片上传','#thumbnail');">
                                    <if condition="empty($post.thumbnail)">
                                        <img src="__TMPL__/public/assets/images/default-thumbnail.png" id="thumbnail-preview" width="135" style="cursor: pointer"/>
                                        <else/>
                                        <img src="{:cmf_get_image_preview_url($post.thumbnail)}" id="thumbnail-preview" width="135" style="cursor: pointer"/>
                                    </if>


                                </a>
                                <input type="button" class="btn btn-sm btn-cancel-thumbnail" value="取消图片">
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
    $(function () {

        editorcontent = new baidu.editor.ui.Editor();
        editorcontent.render('content');
        try {
            editorcontent.sync();
        } catch (err) {
        }

        $('.btn-cancel-thumbnail').click(function () {
            $('#thumbnail-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
            $('#thumbnail').val('');
        });

        //加载获取选中的type_id
        var type = $('#type_id').children('option:selected').val();
        //球队对战
        var match_id = $('#bat_match_id').val();
        //推荐聊吧
        var talk_ids_guess = $('#talk_ids').val();
        //推荐竞猜
        var bat_match_id_guess = $('#bat_match_id_guess').val();
        getData(type,match_id,talk_ids_guess,bat_match_id_guess);
        //球队对战联动
        $('#type_id').on('change',function(){
            var type_id = $(this).children('option:selected').val();
            getData(type_id);
        });

        //多选选中事件
        $('#talk_id').on('changed.bs.select',function(e){
            //选中的value值，会自动添加到数组中[1,2,3]
            var appliesAll = $(this).val();
            if(appliesAll != null){
                $('#talk_ids').val(appliesAll);
            }else{
                $('#talk_ids').val('');
            }
        });

        //获取table宽度,动态设置selectpicker的宽度
        var width = $('table').width();
        $(".selectpicker").selectpicker({
            width:width*0.85
        });
    });

    function getData(type_id,match_id='',talk_ids_guess='',bat_match_id_guess=''){
        $.ajax({
            type: 'GET',
            url: "/admin/home/getBatMatch",
            data: {
                'type_id': type_id,
            },
            dataType: 'json',
            success: function(data) {
                console.log(data);
                var html = '';
                html += '<option value="">请选择球队对战</option>';
                $.each(data['bat'],function(i,val){
                    if(match_id == ''){
                        html += '<option value="'+val['bat_id']+'">'+val['bat_name']+'</option>';
                    }else{
                        //选中
                        if(match_id == val['bat_id']){
                            html += '<option value="'+val['bat_id']+'" selected>'+val['bat_name']+'</option>';
                        }else{
                            html += '<option value="'+val['bat_id']+'">'+val['bat_name']+'</option>';
                        }

                    }
                });
                $('#bat_id').html(html);

                //推荐付费聊吧
                var html1 = '';
                $.each(data['talk'],function(i,val){
                    html1 += '<option value="'+val['id']+'">'+val['title']+'</option>';
                });
                $('#talk_id').html(html1);
                $('#talk_id').selectpicker("refresh");
                $('#talk_id').selectpicker("render");
                //选中付费聊吧
                if(talk_ids_guess == ''){
                    $('#talk_ids').val('');
                }else{
                    var appliesAll = "{$post.talk_ids_guess}";
                    appliesAll = appliesAll.split(',');
                    if(appliesAll != null){
                        //选中
                        $('#talk_id').selectpicker('val',appliesAll);
                        //赋值
                        $('#talk_ids').val(appliesAll);
                    }
                }

                //推荐互动竞猜
                var html3 = '';
                html3 += '<option value="">请选择球队对战</option>';
                $.each(data['bat'],function(i,val){
                    if(bat_match_id_guess == ''){
                        html3 += '<option value="'+val['bat_id']+'">'+val['bat_name']+'</option>';
                    }else{
                        //选中
                        if(bat_match_id_guess == val['bat_id']){
                            html3 += '<option value="'+val['bat_id']+'" selected>'+val['bat_name']+'</option>';
                        }else{
                            html3 += '<option value="'+val['bat_id']+'">'+val['bat_name']+'</option>';
                        }

                    }
                });
                $('#bat_id_guess').html(html3);
            }
        });
    }
</script>
</body>
</html>
